<template>
	<view>
		<!-- 搜索框 -->
		<view class="top_search">
			<view class="searchPhoto">
				<image class="searchP" src="/static/images/lunbo/search.png" widthFix></image>
				<input v-model="inputC" class="searchI" type="text" placeholder="请输入课程名称"/>
			</view>
			<button class="searchB" @click="search">搜索</button>
		</view>
		<!-- 展示部分 -->
		<view class="bottom_show">
			<view class="show_title">
				全部
			</view>
			<view class="show_content" v-for="item in Arr" :key="item.id" @click="toDetail(item)">
				<view class="show_picture">
					<image class="showP" :src="item.src" widthFix></image>
				</view>
				<view class="show_detail">
					<view class="showT">
						{{item.className}}
					</view>
					<view class="label">
						<template v-for="itemo in item.tag.slice(0,2)" :key="itemo">
							<view class="label_item">{{itemo}}</view>
						</template>
					</view>
					<view class="show_num">
						共{{item.juji.length}}课
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartoonArr : [],				
				Arr:[],
				inputC:""				
			}
		},
		methods: {
			search(){
				if(this.inputC){
					this.Arr=this.cartoonArr.filter(value=>value.className.indexOf(this.inputC)!=-1);
				}else{
					this.Arr=this.cartoonArr
				}	
			},
			toDetail(item){
				uni.navigateTo({
					url: '/uni_modules/cartoon-details/components/cartoon-details/cartoon-details?item='+encodeURIComponent(JSON.stringify(item))
				})
			}
		},
		onShow:function(){
			let a = this.$store.state.cartoonData.classesGuo;
			let b = this.$store.state.cartoonData.classesYing;
			this.cartoonArr = [...a,...b];
			this.Arr=this.cartoonArr
		}
	}
</script>

<style scoped>
	.top_search{
		width: 95%;
		margin: 0 auto;
		display: flex;
		align-items: center
	}
	.searchPhoto{
		display: flex;
		align-items: center
	}
	.searchP{
		height: 40px;
		width: 40px;
	}
	.searchI{
		border: 1px solid #515151;
		border-radius: 10px;
		height: 20px;
		width: 170px;
		padding: 10rpx 20rpx;
	}
	.searchB{
		width: 70px;
		height: 34px;
		line-height: 34px;
		background-color: black;
		color: white;
	}
	.bottom_show{
		width: 95%;
		margin: 0 auto;
		margin-top: 10px;
		text-align: center;
	}
	.show_title{
		font-size: 18px;
	}
	.show_content{
		border-top: 1px solid #515151;
		margin-top: 10px;
		display: flex;
	}
	.show_detail{
		margin: 10px 0 0 10px;
		height: 100px;
		display: inline;
		justify-content: space-between;
	}
	.show_picture{
		width: 150px;
		height: 100px;
		margin-top: 10px;
	}
	.showP{
		height: 100%;
		width: 100%;
	}
	.showT{
		font-size: 18px;
	}
	.label_item{
		display: inline-block;
		padding: 5px 20px;
		margin: 5px;
		border-radius: 5px;
		border: 1px solid black;
		color: black;
	}
</style>
